<template>
  <div>
    <a-card>
      <div class="">
        <a-card :bodyStyle="{padding : '10px 24px'}" :bordered="true" class="searchBox">
          <a-form layout="inline">

            <a-form-item label="名称">
              <a-input v-model="searchParams.name"></a-input>
            </a-form-item>


            <a-form-item label="类型">
              <a-select allowClear style="width: 200px" v-model="searchParams.type">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">0</a-select-option>
                <a-select-option value="2">1</a-select-option>
              </a-select>
            </a-form-item>


            <a-form-item>
              <a-button @click="handleSearch" icon="search" type="primary">查询</a-button>
            </a-form-item>

          </a-form>
        </a-card>
      </div>

      <div class="table-operations">
        <a-button @click="handleCreate" icon="plus">添加</a-button>
      </div>

      <a-table :columns="columns" :dataSource="data"
               :loading="loading" :pagination="pagination" @change="handleTableChange"
               bordered rowKey="name"
               size="small"
      >

        <template slot="name" slot-scope="text,record">
          <a href="javascript:;">{{text}}</a>
        </template>

        <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleUpdate(record)" href="javascript:;">修改</a>
          <a-divider type="vertical"/>
          <a @click="handleDelete(record)" href="javascript:;">删除</a>
        </template>
      </span>

      </a-table>

      <a-modal  :maskClosable="false"
        :title="mdl.dialogTitleMap[mdl.dialogStatus]"
        :width="500"
        @ok="mdl.dialogStatus === 'create' ? createData() : updateData()"
        v-model="mdl.visible"
      >
        <a-form>
          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="名称"
          >
            <a-input placeholder="" v-model="mdl.formData.name"/>
          </a-form-item>
          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="开始"
          >
            <a-input placeholder="" v-model="mdl.formData.startTime"/>
          </a-form-item>
          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="结束"
          >
            <a-input placeholder="" v-model="mdl.formData.endTime"/>
          </a-form-item>
        </a-form>
      </a-modal>

    </a-card>


  </div>
</template>

<script>

  import {
    getTbAccountRollingList,
    createTbAccountRolling,
    deleteTbAccountRolling,
    updateTbAccountRolling,
    getTbAccountRollingDetail
  } from '@/api/TbAccountRolling'

  export default {
    components: {},
    data() {
      return {

        /*   -------搜索框--------*/
        searchParams: {
          name: '',
          type: '0'
        },

        /*   -------分页--------*/
        pagination: {
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => {
            return `共 ${total} 条`
          },
          current: 1,
          pageSize: 10,
          total: 0
        },

        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加'
          },
          visible: false,
          title: '',
          formData: {
            id: '',
            name: '',
            startTime: '',
            endTime: '',
            createTime: '',
            createBy: '',
            updateTime: '',
            updateBy: ''
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          }
          ,
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          }

        },


        /*   -------表格--------*/
        loading: false,
        columns: [
          {
            title: '名称',
            dataIndex: 'name'
          },
          {
            title: '开始',
            dataIndex: 'startTime'
          },
          {
            title: '结束',
            dataIndex: 'endTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        data: []

      }
    },
    inject: ['upShow'],filters: {},
    created() {

    },
    mounted() {
      this.getTableData()
    },
    methods: {


      handleTableChange(pagination, filters, sorter) {
        this.pagination = pagination
        let sortOrder = ''
        let sortField = sorter.field ? sorter.field : ''
        if (sorter.order) {
          sortOrder = sortOrder === 'ascend' ? 'asc' : 'desc'
        }
        this.getTableData(sortField, sortOrder)
      },

      getTableData(sortField, sortOrder) {


        this.loading = true
        // 此处调用获取实时雨量数据
        const parameter = {
          _search: true,//是否分页查询
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1,
          sortField: sortField || '',
          sortOrder: sortOrder || '',
          // data:this.searchParams
          data: {
            keywords: this.searchParams.name
          }
        }
        getTbAccountRollingList(parameter).then(res => {
          this.loading = false
          this.pagination.total = res.data.total
          this.data = res.data.records
        }).catch(err => {
          this.loading = false
        })
      },
      handleSearch() {
        this.pagination.current = 1
        this.getTableData()
      },

      setDefaults() {
        this.mdl.formData = {
          id: '',
          name: '',
          startTime: '',
          endTime: '',
          createTime: '',
          createBy: '',
          updateTime: '',
          updateBy: ''
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true

      },
      createData() {
        const parameter = this.mdl.formData
        createTbAccountRolling(parameter).then(res => {
          if (res.code === 200
          ) {
            this.upShow(2,'添加数据')
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2,'请求失败，err')
        })
      },

      //编辑当前行
      handleUpdate(row) {
        console.log('这一行', row)
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },

      updateData(row) {
        this.upShow(2,'修改数据')
        const parameter = {
          id: this.mdl.formData.id,
          name: this.mdl.formData.name,
          startTime: this.mdl.formData.startTime,
          endTime: this.mdl.formData.endTime,
          createTime: this.mdl.formData.createTime,
          createBy: this.mdl.formData.createBy,
          updateTime: this.mdl.formData.updateTime,
          updateBy: this.mdl.formData.updateBy
        }
        updateTbAccountRolling(parameter).then(res => {
          if (res.code === 200
          ) {
            this.upShow(2,'添加数据')
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2,'请求失败，err')
        })
      },

      handleDelete(row) {
        deleteTbAccountRolling(row.id).then(res => {
          if (res.code === 200
          ) {
            this.upShow(1,res.msg || '删除成功')
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2,'请求失败，err')
        })
      },



    }
  }
</script>

<style scoped>

</style>
